//引入变量
@import "variable.less";
//基础公共样式

//浮动
.float-left{float:left;}
.float-right{float:right;}
.clear{clear:both;}
.after-clear{
  &::after{
    content:'';
    display:block;
    width:100%;
    height:0;
    clear:both;
  }
}

//文字对齐方式
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}

//文字颜色
.text-red{color:@color-red;}

//字体
.font(@fontWeight:normal,@fontSize:14px,@lineHeight:1.5,@fontFamily:'Microsoft YaHei'){
  font:@fontWeight @fontSize/@lineHeight @fontFamily;
}

//单行文字溢出省略
.single_text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

//多单行文字溢出省略
.multi_text(@linenum){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:@linenum;
  -webkit-box-orient: vertical;
}

//透明度
.opacity(@opacity){
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

//border-box
.border-box{
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}

//圆角
.border-radius(@radius){
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

//阴影
.box-shadow(@x: 0, @y: 0, @blur: 1px, @color:#000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

//垂直居中对其的盒子
.vertical-center{
    /* Center vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

//input的placeholder颜色
.placeholder(@color: @input-color-placeholder){
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

.img-box{
  line-height:0;
  font-size:0;
}


//动画样式
.animation(@name,@duration,@speed,@number,@direction, @mode){
  //@name 动画的名称
  //@duration 规定动画完成一个周期所花费的秒或毫秒
  //@speed 规定动画完成一个周期所花费的秒或毫秒 
          //linear (动画从头到尾的速度是相同的)
          //ease (默认。动画以低速开始，然后加快，在结束前变慢。)
          //ease-in (动画以低速开始。)
          //ease-out (动画以低速结束。)
          //ease-out (动画以低速结束。)
          //ease-in-out (动画以低速开始和结束。)
          //cubic-bezier(n,n,n,n) (在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。)
  //@delay 定义动画开始前等待的时间，以秒或毫秒计
  //@number 定义动画播放次数的数值 n 或 infinite（规定动画应该无限次播放）。 
  //@direction 规定动画是否在下一周期逆向地播放。normal（默认值。动画应该正常播放。） alternate（动画应该轮流反向播放。）； 
  //@State 规定动画是否在下一周期逆向地播放。 paused（规定动画已暂停。） running（规定动画正在播放。）； 
  //@mode 规定动画是否在下一周期逆向地播放。  
          //none(不改变默认行为。)
          //forwards(当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）)
          //backwards(在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）)
          //both(向前和向后填充模式都被应用)
animation: @name @duration @speed  @number @direction @mode;
-ms-animation:@name @duration @speed  @number @direction @mode;
-moz-animation:@name @duration @speed  @number @direction @mode;
-webkit-animation:@name @duration @speed  @number @direction @mode;
-o-animation:@name @duration @speed  @number @direction @mode;
}

//动画时间
.animation_duration(@time){
  animation-duration:@time;
  -ms-animation-duration:@time;
  -moz-animation-duration:@time;
  -webkit-animation-duration:@time;
  -o-animation-duration:@time;
}

//动画延时时间
.animation_delay(@time){
  animation-delay:@time;
  -ms-animation-delay:@time;
  -moz-animation-delay:@time;
  -webkit-animation-delay:@time;
  -o-animation-delay:@time;
}

//动画示例
.animation{
  from {
    width:100px;
    height:100px;
    background-color:blue;
  }
  to {
    width:300px;
    height:300px;
    background-color:red;
  }
}
@keyframes animation{ .animation}
@-moz-keyframes animation{ .animation}
@-webkit-keyframes animation { .animation}
@-o-keyframes animation { .animation}
.animation_demo{
  width:100px;
  height:100px;
  background-color:blue;
  .animation(animation,2s,ease-in-out,1,normal,forwards);
}

//过度动画
.transition(@property,@duration,@timing-function,@delay){
  //@property 过渡效果的 CSS 属性的名称
    //none  没有属性会获得过渡效果
    //all  所有属性都将获得过渡效果。
    //property  定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。如：width,height
  //@duration 完成过渡效果需要多少秒或毫秒
    //time 如：'2s' '10000ms'
  //@timing-function  速度效果的速度曲线
    //linear (动画从头到尾的速度是相同的)
    //ease (默认。动画以低速开始，然后加快，在结束前变慢。)
    //ease-in (动画以低速开始。)
    //ease-out (动画以低速结束。)
    //ease-out (动画以低速结束。)
    //ease-in-out (动画以低速开始和结束。)
    //cubic-bezier(n,n,n,n) (在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。)
  //@delay  过渡效果何时开始
    //time 如：'2s' '10000ms'
  transition:@property @duration @timing-function @delay;
  -ms-transition:@property @duration @timing-function @delay;
  -moz-transition:@property @duration @timing-function @delay;
  -webkit-transition:@property @duration @timing-function @delay;
  -o-transition:@property @duration @timing-function @delay;
}

//过度动画示例
.transition_demo{
  width:100px;
  height:100px;
  background-color:blue;
  .transition(all,2s,ease,0s);
  &:hover{
    width:300px;
    height:300px;
    background-color:red;
  }
}

//none  定义不进行转换。
//matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
//matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。  
//translate(x,y)  定义 2D 转换
//translate3d(x,y,z)  定义 3D 转换。 
//translateX(x) 定义转换，只是用 X 轴的值
//translateY(y) 定义转换，只是用 Y 轴的值
//translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 
//scale(x,y)  定义 2D 缩放转换
//scale3d(x,y,z)  定义 3D 缩放转换。 
//scaleX(x) 通过设置 X 轴的值来定义缩放转换。
//scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
//scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
//rotate(angle) 定义 2D 旋转，在参数中规定角度。
//rotate3d(x,y,z,angle) 定义 3D 旋转。 
//rotateX(angle)  定义沿着 X 轴的 3D 旋转。
//rotateY(angle)  定义沿着 Y 轴的 3D 旋转。
//rotateZ(angle)  定义沿着 Z 轴的 3D 旋转。
//skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
//skewX(angle)  定义沿着 X 轴的 2D 倾斜转换。
//skewY(angle)  定义沿着 Y 轴的 2D 倾斜转换。  
//perspective(n)  为 3D 转换元素定义透视视图。
.transform(){
	transform:rotate(7deg);
	-ms-transform:rotate(7deg);   /* IE 9 */
	-moz-transform:rotate(7deg);  /* Firefox */
	-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
	-o-transform:rotate(7deg);  /* Opera */
}

//3d偏移
.transform_translate3d(@x,@y,@z){
  transform:translate3d(@x,@y,@z);
  -ms-transform:translate3d(@x,@y,@z);   /* IE 9 */
  -moz-transform:translate3d(@x,@y,@z);  /* Firefox */
  -webkit-transform:translate3d(@x,@y,@z); /* Safari 和 Chrome */
  -o-transform:translate3d(@x,@y,@z);  /* Opera */
}

//3d缩放
.transform_scale3d(@x,@y,@z){
  transform:scale3d(@x,@y,@z);
  -ms-transform:scale3d(@x,@y,@z);   /* IE 9 */
  -moz-transform:scale3d(@x,@y,@z);  /* Firefox */
  -webkit-transform:scale3d(@x,@y,@z); /* Safari 和 Chrome */
  -o-transform:scale3d(@x,@y,@z);  /* Opera */
}

//角度旋转
.transform_rotate(@angle){
  transform:rotate(@angle);
  -ms-transform:rotate(@angle);   /* IE 9 */
  -moz-transform:rotate(@angle);  /* Firefox */
  -webkit-transform:rotate(@angle); /* Safari 和 Chrome */
  -o-transform:rotate(@angle);  /* Opera */
}

//3dX轴旋转
.transform_rotateX(@angle){
  transform:rotateX(@angle);
  -ms-transform:rotateX(@angle);   /* IE 9 */
  -moz-transform:rotateX(@angle);  /* Firefox */
  -webkit-transform:rotateX(@angle); /* Safari 和 Chrome */
  -o-transform:rotateX(@angle);  /* Opera */
}

//3dY轴旋转
.transform_rotateY(@angle){
  transform:rotateY(@angle);
  -ms-transform:rotateY(@angle);   /* IE 9 */
  -moz-transform:rotateY(@angle);  /* Firefox */
  -webkit-transform:rotateY(@angle); /* Safari 和 Chrome */
  -o-transform:rotateY(@angle);  /* Opera */
}

//3dZ轴旋转
.transform_rotateZ(@angle){
  transform:rotateZ(@angle);
  -ms-transform:rotateZ(@angle);   /* IE 9 */
  -moz-transform:rotateZ(@angle);  /* Firefox */
  -webkit-transform:rotateZ(@angle); /* Safari 和 Chrome */
  -o-transform:rotateZ(@angle);  /* Opera */
}

//3dX轴倾斜
.transform_skewX(@angle){
  transform:skewX(@angle);
  -ms-transform:skewX(@angle);   /* IE 9 */
  -moz-transform:skewX(@angle);  /* Firefox */
  -webkit-transform:skewX(@angle); /* Safari 和 Chrome */
  -o-transform:skewX(@angle);  /* Opera */
}

//3dY轴倾斜
.transform_skewY(@angle){
  transform:skewY(@angle);
  -ms-transform:skewY(@angle);   /* IE 9 */
  -moz-transform:skewX(@angle);  /* Firefox */
  -webkit-transform:skewY(@angle); /* Safari 和 Chrome */
  -o-transform:skewY(@angle);  /* Opera */
}

//旋转动画
.animation-rotate{
  from {
    .transform_rotate(0deg);
  }
  to {
    .transform_rotate(360deg);
  }
}
@keyframes animation-rotate{ .animation-rotate}
@-moz-keyframes animation-rotate{ .animation-rotate}
@-webkit-keyframes animation-rotate { .animation-rotate}
@-o-keyframes animation-rotate { .animation-rotate}

//反向旋转动画
.animation-rotate-un{
  from {
    .transform_rotate(0deg);
  }
  to {
    .transform_rotate(-360deg);
  }
}
@keyframes animation-rotate-un{ .animation-rotate-un}
@-moz-keyframes animation-rotate-un{ .animation-rotate-un}
@-webkit-keyframes animation-rotate-un { .animation-rotate-un}
@-o-keyframes animation-rotate-un { .animation-rotate-un}

//旋转中心
.transform-origin(@x,@y){
  -ms-transform-origin:@x @y;   /* IE 9 */
  -moz-transform-origin:@x @y;  /* Firefox */
  -webkit-transform-origin:@x @y; /* Safari 和 Chrome */
  -o-transform-origin:@x @y;  /* Opera */
}